<template>
  <div class="analytics-page">
    <header class="analytics-header">
      <h1>游戏数据分析</h1>
    </header>

    <div class="analytics-content">
      <!-- 图表容器 -->
      <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
      
      <div class="statistics">
        <h2>统计信息</h2>
        <el-row :gutter="20">
          <el-col :span="8" v-for="stat in stats" :key="stat.label">
            <el-card class="statistic-card">
              <strong>{{ stat.label }}</strong>
              <span>{{ stat.value }}</span>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div class="recent-activity">
        <h2>最近活动</h2>
        <el-table 
          :data="recentActivities" 
          border 
          style="width: 100%"
          :cell-style="{padding: '12px 0'}"
          :header-cell-style="{background: '#f5f7fa', padding: '12px 0'}"
        >
          <el-table-column 
            prop="player" 
            label="玩家" 
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          
          <el-table-column 
            prop="game" 
            label="游戏" 
            width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          
          <el-table-column 
            prop="achievement" 
            label="成就"
            min-width="180"
            :show-overflow-tooltip="true"
          >
            <template #default="{row}">
              <el-tag effect="plain" type="success">
                {{ row.achievement }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column 
            prop="timestamp" 
            label="日期" 
            width="160"
          >
            <template #default="{row}">
              <div class="timestamp">
                {{ formatDate(row.timestamp) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="top-games">
        <h2>热门游戏</h2>
        <el-table 
          :data="topGames" 
          border 
          style="width: 100%"
          :cell-style="{padding: '12px 0'}"
          :header-cell-style="{background: '#f5f7fa', padding: '12px 0'}"
        >
          <el-table-column label="排名" width="70">
            <template #default="{row, $index}">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="游戏名称" prop="name" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="players" label="玩家数" width="120" align="right">
            <template #default="{row}">
              {{ row.players.toLocaleString() }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      totalPlayers: 12458,
      totalPlayTime: 8765, // 小时
      averageRating: 4.3,
      recentActivities: [
        { player: 'KKoma', game: '战斗传说', achievement: '达成500场胜利', timestamp: new Date('2025-06-03T14:32:00') },
        { player: '宇宙机器人', game: '年度游戏大奖TGA', achievement: '获得了2024年度最佳游戏！', timestamp: new Date('2025-06-02T18:45:00') },
        { player: '糖', game: '冒险猎手', achievement: '获得稀有装备"星辰之剑"', timestamp: new Date('2025-06-03T18:45:00') },
        { player: '风之旅人', game: '天空之城', achievement: '完成全地图探索', timestamp: new Date('2025-06-02T22:10:00') },
        { player: '暗夜猎手', game: '暗黑纪元', achievement: '单人通关地狱难度', timestamp: new Date('2025-06-01T16:30:00') }
      ],
      topGames: [
        { name: '元神', players: 8560 },
        { name: '元神2', players: 7230 },
        { name: '元神3', players: 6540 },
        { name: '人格', players: 5890 },
        { name: '星际战甲', players: 4320 }
      ],
      dailyData: {
        days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        playTime: [150, 230, 224, 218, 135, 147, 260],
        kda: [2.8, 3.2, 3.5, 2.9, 3.8, 3.0, 4.1]
      }
    };
  },
  computed: {
    stats() {
      return [
        { label: '总玩家数', value: this.totalPlayers.toLocaleString() },
        { label: '总游戏时长', value: `${this.totalPlayTime.toLocaleString()} 小时` },
        { label: '平均评分', value: this.averageRating.toFixed(1) }
      ];
    }
  },
  methods: {
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      
      const option = {
        title: {
          text: '每日游戏数据统计',
          subtext: '游戏时长(分钟) / KDA',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            return `
              ${params[0].name}<br/>
              时长: ${params[0].value}分钟<br/>
              KDA: ${params[1].value}`;
          }
        },
        legend: {
          data: ['游戏时长', 'KDA'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.dailyData.days,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '游戏时长',
            axisLabel: { formatter: '{value} 分钟' },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          {
            type: 'value',
            name: 'KDA',
            min: 0,
            max: 5,
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: '游戏时长',
            data: this.dailyData.playTime,
            type: 'line',
            smooth: true,
            itemStyle: { color: '#5470C6' },
            lineStyle: {
              width: 3
            },
            symbolSize: 8
          },
          {
            name: 'KDA',
            data: this.dailyData.kda,
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            itemStyle: { color: '#91CC75' },
            lineStyle: {
              width: 3
            },
            symbolSize: 8
          }
        ]
      };
      
      this.chart.setOption(option);
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      window.addEventListener('resize', this.handleResize);
    });
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  }
};
</script>

<style scoped>
.analytics-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.analytics-header {
  margin-bottom: 30px;
  text-align: center;
}

.analytics-header h1 {
  font-size: 28px;
  color: #333;
}

.analytics-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

h2 {
  margin: 25px 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #444;
  font-size: 20px;
}

.statistics {
  margin-bottom: 30px;
}

.statistic-card {
  padding: 20px;
  text-align: center;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.statistic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.statistic-card strong {
  display: block;
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.statistic-card span {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.recent-activity, .top-games {
  margin-bottom: 30px;
  overflow-x: auto;
}

/* 时间显示优化 */
.timestamp {
  font-size: 13px;
  color: #666;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .el-table__body-wrapper {
    min-width: 600px; /* 保证在小屏幕下表格不被挤压变形 */
  }
  
  .recent-activity, .top-games {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px;
    background: #fff;
  }
  
  .statistic-card {
    margin-bottom: 15px;
  }
  
  .el-col {
    width: 100%;
    margin-bottom: 15px;
  }
}
</style>